<template>
	<view class="uy-bs-000000 uy-bg-ffffff uy-m-t-20 uy-b-r-10" :style="{width: `${width}px`, 'background-color': customStyle.backgroundColor}">
		<view class="uy-m-r-20 uy-relative">
			<uy-image :width="imgWidth" :height="imgHeight" :src="data[imgKey] || ''" radius="5"></uy-image>
			<slot name="label" />
		</view>
		<slot />
	</view>
</template>

<script>
	/**
	 * ListItem 列表子组件
	 * @description 列表子组件
	 * @property {Object} customStyle  自定义子组件样式
	 */
	export default {
		name:"uy-list-item",
		props: {
			data: {
				type: Object,
				default: () => {}
			},
			flex: {
				type: Boolean,
				default: false
			},
			imgKey: {
				type: String,
				default: 'image'
			},
			imgW: {
				type: [Number, String],
				default: 0
			},
			imgH: {
				type: [Number, String],
				default: 0
			},
			interval: {
				type: [Number, String],
				default: 60
			},
			customStyle: {
				type: Object,
				default () {
					return {
						backgroundColor: '#FFFFFF'
					}
				}
			},
			keepScrollPosition: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				
			};
		},
		computed: {
			width() {
				let obj, interval = uni.$uy.rpxToPx(this.interval);
				uni.getSystemInfo({
					success: res => {
						obj = res;
					}
				})
				return (obj.windowWidth - interval) / (this.flex? 2: 1)
			},
			imgWidth() {
				let obj, interval = uni.$uy.rpxToPx(this.interval);
				uni.getSystemInfo({
					success: res => {
						obj = res;
					}
				})
				return this.imgW || uni.$uy.pxToRpx((obj.windowWidth - interval) / 2)
			},
			imgHeight() {
				let obj, interval = uni.$uy.rpxToPx(this.interval);
				uni.getSystemInfo({
					success: res => {
						obj = res;
					}
				})
				return this.imgH || uni.$uy.pxToRpx((obj.windowWidth - interval) / 2)
			}
		}
	}
</script>

<style>

</style>